<template>
  <view class="home-container">
    <!-- 自定义导航栏 
    <custom-navbar title="卡券管理"></custom-navbar>-->
<uni-nav-bar left-icon="left" @clickLeft="back" backgroundColor="#3183FB" style="width: 100%;" :border="false"

color="#fff" title="卡券管理"></uni-nav-bar>
    <!-- 新增优惠券按钮 -->
    <view class="add-coupon-btn" @click="goToIssueCoupon">
      <image src="/static/加号1.png" mode="aspectFit" class="add-icon"></image>
      <text class="add-text">新增优惠券</text>
    </view>

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 选项卡：窄宽度且居中 -->
      <view class="tab-bar">
        <view class="tab-item-l" :class="{ 'active': currentTab === 'active' }" @click="switchTab('active')">
          进行中
        </view>
        <view class="tab-item-r" :class="{ 'active': currentTab === 'ended' }" @click="switchTab('ended')">
          已结束
        </view>
      </view>

      <!-- 优惠券列表 -->
      <view class="coupons-list">
        <view class="coupon-card" :class="{ 'ended': coupon.status === 'ended' }" v-for="(coupon, index) in filteredCoupons" :key="coupon.id">
          <!-- 左侧橙色区域 -->
          <view class="coupon-left">
            <view class="coupon-condition">{{ coupon.condition }}</view>
            <view class="coupon-amount">
              <text class="currency">¥</text>
              <text class="amount">{{ coupon.value }}</text>
            </view>
          </view>

          <!-- 右侧信息区域 -->
          <view class="coupon-right">
            <view class="coupon-info">
              <!-- 优惠券名称：标签与内容间隔10rpx -->
              <view class="info-item coupon-name-item">
                <text class="info-label coupon-name-label">优惠券名称:</text>
                <text class="info-value coupon-name-content">{{ coupon.name }}</text>
              </view>
              <!-- 有效期：标签与内容间隔10rpx -->
              <view class="info-item">
                <text class="info-label gray-text">有效期:</text>
                <text class="info-value gray-text">{{ coupon.validPeriod }}</text>
              </view>
              <!-- 限领提示：无具体内容，仅单文本 -->
              <view class="info-item limit-tip-item">
                <text class="info-label gray-text">{{ coupon.limitText }}</text>
              </view>
            </view>

            <!-- 状态标识 -->
            <view class="status-stamp" v-if="coupon.status === 'ended'">
              <text class="ended-watermark">已结束</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="filteredCoupons.length === 0">
      <image src="/static/empty-coupons.png" mode="aspectFit" class="empty-icon"></image>
      <view class="empty-text">暂无卡券数据</view>
    </view>
  </view>
</template>

<script>

export default {
	
  data() {
    return {
      currentTab: 'active',
      coupons: [
        {
          id: 1,
          name: '新用户专享体验券',
          condition: '满200元可用',
          value: '20',
          status: 'active',
          validPeriod: '2020.3.18-2023.4.18',
          limitText: '每人限领一张',
          issuedCount: 120,
          usedCount: 85,
          createTime: '2024-01-01 10:00',
          startTime: '2024-01-01 00:00',
          endTime: '2024-01-31 23:59'
        },
        {
          id: 2,
          name: '新用户专享体验券',
          condition: '满200元可用',
          value: '20',
          status: 'ended',
          validPeriod: '2020.3.18-2020.4.18',
          limitText: '每人限领一张',
          issuedCount: 200,
          usedCount: 156,
          createTime: '2024-01-01 11:00',
          startTime: '2024-01-01 00:00',
          endTime: '2024-02-29 23:59'
        },
        {
          id: 3,
          name: '新用户专享体验券',
          condition: '满200元可用',
          value: '20',
          status: 'ended',
          validPeriod: '2020.3.18-2020.4.18',
          limitText: '每人限领一张',
          issuedCount: 50,
          usedCount: 30,
          createTime: '2024-01-01 12:00',
          startTime: '2024-01-01 00:00',
          endTime: '2024-03-31 23:59'
        }
      ]
    }
  },
  computed: {
    filteredCoupons() {
      return this.coupons.filter(coupon => coupon.status === this.currentTab)
    }
  },
  onLoad() {
    this.loadCoupons()
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1
      })
    },
    async loadCoupons() {
      try {
        uni.showLoading({ title: '加载中...' })
        setTimeout(() => {
          uni.hideLoading()
        }, 1000)
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    },
    switchTab(tab) {
      this.currentTab = tab
      this.loadCoupons()
    },
    goToIssueCoupon() {
      uni.navigateTo({
        url: '/pages/coupons/issue'
      })
    }
  }
};
</script>

<style>
/* 全局样式无变化，重点修改标签与内容的横向间距 */
.home-container {
  padding-top: 10rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
 /*padding-top: calc(env(safe-area-inset-top) + 88rpx);*/
  position: relative;
}

.home-container::before {
  content: '';
  position: absolute;
  top: calc(env(safe-area-inset-top) + 88rpx);
  left: 0;
  right: 0;
  height: 600px;
  background-image: linear-gradient(
    to bottom,
    #2f81fa 0%, #2f81fa 33.33%,
    #f7f7f7 33.33%, #f7f7f7 100% 
  );
  background-repeat: no-repeat;
  z-index: 0;
}

.add-coupon-btn {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 50rpx;
  padding: 20rpx 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  margin: 20rpx auto;
  width: 80%;
}

.add-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 12rpx;
}

.add-text {
  font-size: 28rpx;
  color: #2f81fa;
  font-weight: 500;
}

.content-area {
  position: relative;
  z-index: 1;
  background: #ffffff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 40rpx 0 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.tab-bar {
  display: flex;
  justify-content: center;
  width: 60%;
  height: 80rpx;
  margin: 0 auto 40rpx;
  border-radius: 50rpx;
  overflow: hidden;
  background: #f2f2f2;
  padding: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.tab-item-l, .tab-item-r {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  background: transparent;
  color: #666666;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-item-l {
  border-radius: 50rpx 0 0 50rpx;
}

.tab-item-r {
  border-radius: 0 50rpx 50rpx 0;
}

.active {
  background: #2f81fa;
  color: #ffffff;
}

.coupons-list {
  padding: 0 30rpx 40rpx;
  display: flex;
  flex-direction: column;
}

.coupon-card {
  background: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 24rpx;
  display: flex;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  position: relative;
  height: 260rpx; /* 高度增加20rpx，避免内容溢出 */
}

.coupon-left {
  width: 200rpx;
  background: linear-gradient(to bottom, #FF8C42 0%, #FF4500 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 已结束状态下左侧区域背景色调整 */
.coupon-card.ended .coupon-left {
  background: #FFC09F;
}

.coupon-condition {
  font-size: 30rpx;
  color: #ffffff;
  margin-bottom: 30rpx;
  opacity: 0.9;
}

.coupon-amount {
  display: flex;
  align-items: baseline;
  color: #ffffff;
}

.currency {
  font-size: 28rpx;
  font-weight: 600;
  margin-right: 2rpx;
  vertical-align: top;
}

.amount {
  font-size: 70rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  line-height: 1;
}

.coupon-right {
  flex: 1;
  background: #FDF5E6;
  padding: 20rpx 24rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 已结束状态下右侧区域背景色调整 */
.coupon-card.ended .coupon-right {
  background: #F2F2F2;
}

.coupon-info {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.info-item {
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  line-height: 1.5;
}

.info-item:last-child {
  margin-bottom: 10rpx;
}

/* 基础标签样式：清除默认样式 + 核心添加10rpx右侧间距 */
.info-label {
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  margin-right: 10rpx; /* 标签与内容之间的横向间隔，设置为10rpx */
}

/* 基础内容样式：清除默认样式 */
.info-value {
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* 1. 优惠券名称项：统一父容器样式 */
.coupon-name-item {
  margin-top: 30rpx;
  font-size: 30rpx;
  color: #020202;
  font-weight: 700;
}

/* 已结束状态下优惠券名称文字颜色调整为灰色 */
.coupon-card.ended .coupon-name-item {
  color: #726E6B;
}

/* 3. 限领提示项：与上一行间距加大，实现靠下效果 */
.limit-tip-item {
  margin-top: 30rpx;
}

/* 有效期/限领提示：小字号灰色 */
.gray-text {
  color: #726E6B;
  font-size: 24rpx;
}

/* 状态标识：长方形灰色边框 */
.status-stamp {
  position: absolute;
  bottom: 30rpx;
  right: 30rpx;
  transform: rotate(-15deg);
  border: 8rpx solid #CCCCCC;
  padding: 0rpx 14rpx;
  border-radius: 4rpx;
}

.ended-watermark {
  font-size: 32rpx;
  color: #CCCCCC;
  font-weight: 700;
  opacity: 0.6;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}
</style>